<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Single error message on submit</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />

<script src="../../includes/xpath.js" type="text/javascript"></script>
<script src="../../includes/SpryData.js" type="text/javascript"></script>
<script src="../../includes/SpryUtils.js" type="text/javascript"></script>
<script src="../../widgets/textfieldvalidation/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../../widgets/passwordvalidation/SpryValidationPassword.js" type="text/javascript"></script>
<script src="../../widgets/confirmvalidation/SpryValidationConfirm.js" type="text/javascript"></script>
<script src="../../widgets/textareavalidation/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="../../widgets/selectvalidation/SpryValidationSelect.js" type="text/javascript"></script>
<script src="../../widgets/radiovalidation/SpryValidationRadio.js" type="text/javascript"></script>

<script type="text/javascript">
<!--

	var errorsOnSubmit = function(form){
	
	var ret = Spry.Widget.Form.validate(form);
	var errorZone= document.getElementById('error_zone');
	
	if (!ret){
		errorZone.style.visibility = 'visible';
		errorZone.style.backgroundColor = 'red';
	}else{
		errorZone.style.visibility = 'hidden';
	}
	return ret;
}

//-->
</script>
<link href="../../widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/passwordvalidation/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/confirmvalidation/SpryValidationConfirm.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/textareavalidation//SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/selectvalidation/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/radiovalidation/SpryValidationRadio.css" rel="stylesheet" type="text/css" />

</head>

<body>
<h3>Single error message on submit</h3>
<p>In this short sample is presented a method how to display a single error message for all validation fields<a href="SubmitFormWithXHRSample.php.html"></a> besides the  errors that are displayed near each field. </p>
<p>Having this behavior, if you have a long form with a lot of fields and you press the submit button, you'll see a generic error message at the bottom of the page alerting you that some fields didn't pass the validation.</p>
<p>This behavior works only if the validation is trigerred on submit.</p>
<hr />
<table width="100%" border="0">
	<tr>
		<td width="21%" valign="top">
	    
			<form id="form1" name="form1" method="post" action="" onsubmit="return errorsOnSubmit(this);">
					<table>
						<tr>
								<td>Username:</td>
								<td>
                               	  <span id="sprytextfield1">
								  		<input name="textfield" type="text" value=""/>
					    		  <span class="textfieldRequiredMsg">A value is required.</span>                                  </span>                                </td>
						</tr>
						<tr>
								<td>Password:</td>
								<td>
                               	  <span id="sprypassword1">
                                        <input name="passfield" type="password" id="password"/>
                                        <span class="passwordRequiredMsg">A value is required.</span>
                                        <span class="passwordMinCharsMsg">The minimum number of characters not met.</span>                                  </span>                                </td>
						</tr>
						<tr>
								<td>Confirm Password:</td>
								<td>
                               	  <span id="spryconfirm1">
                                		<input name="confirm" type="password" value="" id="confirm"/>
                                        <span class="confirmRequiredMsg">A value is required.</span>
										<span class="confirmInvalidMsg">The values don't match</span>                                  </span>                          </td>
						</tr>
						<tr>
								<td>Comments:</td>
								<td><span id="sprytextarea1">
								  <textarea name="textarea" cols="35" rows="4">More details...</textarea>
							    </span></td>
						</tr>
						<tr>
								<td>Male/Female:</td>
								<td><span id="spryselect1">
								  <select name="simpleselect">
                                    <option value="-1" selected="selected">Please select</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                  </select>
							    <span class="selectInvalidMsg">Please select a valid item.</span>							    
                                <span class="selectRequiredMsg">Please select an item.</span></span></td>
						</tr>						
						
				    
				    <tr>
					      <td>Married:</td>
					      <td>
                          <span id="spryradio1">
							
                                    <label for="yes">Yes                          
                                    <input type="radio" name="no" id="yes" value="Y"/>
                                    </label>
                                    <label for="no">No
                                    <input type="radio" name="no" id="no" value="N"/></label>
        
                                    <span class="radioRequiredMsg">Please specify a value.</span>                         </span>                       </td>
				    </tr>
				    <tr>
				      <td colspan="2"><span id="error_zone" style="visibility:hidden;">Errors: There are some errors in the form. Please correct them.</span></td>
				      </tr>				    
						
						<tr>
								<td colspan="2">
										
										<input type="submit" value="Submit"/>
										<input type="reset" value="Reset"/>                                
                                </td>
						</tr>
					</table>
		  </form>				
	  </td>
		
  </tr>
</table>


<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {hint:"Enter your user name", validateOn:["blur"]});
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1", {isRequired:true, validateOn:["blur"],  minChars:5 } );
var spryconf1 = new Spry.Widget.ValidationConfirm("spryconfirm1", "sprypassword1", {validateOn: ['blur']});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {isRequired:false});
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {invalidValue:"-1"});
var spryradio1 = new Spry.Widget.ValidationRadio("spryradio1", {validateOn: ['change']});
//-->
</script>
</body>
</html>
 
